/* components */
import { 
  SettingGPTViewContentTitle,
  SettingGPTViewContentSubTitle,
  SettingGPTViewDialog
} from "@src/modules/setting/gpt/components";
import SettingGPTRobotViewName from "@src/modules/setting/gpt/views/index/name";
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* model */
/* vue */
import { defineComponent, PropType } from 'vue'
/* types */
import { AIChatRobotItemComponentType } from '@src/modules/setting/gpt/types'
/* utils */
import { getRootWindowInitData } from '@src/util/window'
import { setClipboardData } from '@src/util/dom'
import { message } from '@src/util/message'
import { isRobotSystem } from "@src/modules/setting/gpt/utils";

type SettingGPTViewDialogComponentType = InstanceType<typeof SettingGPTViewDialog>
type SettingGPTRobotViewNameComponentType = InstanceType<typeof SettingGPTRobotViewName>

enum SettingGPTEditDescriptionEventEnum {
  Input = 'input'
}

export default defineComponent({
  name: ComponentNameEnum.SettingGPTEditDescription,
  props: {
    value: {
      type: Object as PropType<AIChatRobotItemComponentType>,
      default: () => ({})
    },
    onInput: {
      type: Function
    }
  },
  data() {
    return {
      nameValue: ''
    }
  },
  computed: {
    dialogTitle(): string {
      return '编辑机器人名称'
    },
    name(): string {
      return this.value.name
    },
    description(): string {
      return this.value.description
    },
    url(): string {
      
      const id = this.value.id
      const rootWindowInitData = getRootWindowInitData()
      const tenantId = rootWindowInitData?.user?.tenantId || ''
      const robotId = id
      const url = `/shb/home/setting/gpt/chat?tenantId=${tenantId}&robotId=${robotId}`
      const origin = window.location.origin
      const fullUrl = `${origin}${url}`
      
      return fullUrl
    },
    settingGPTViewDialogComponent(): SettingGPTViewDialogComponentType {
      return this.$refs.SettingGPTViewDialog as SettingGPTViewDialogComponentType
    },
    settingGPTRobotViewNameComponent(): SettingGPTRobotViewNameComponentType {
      return this.$refs.SettingGPTRobotViewName as SettingGPTRobotViewNameComponentType
    }
  },
  methods: {
    openDialog() {
      this.settingGPTViewDialogComponent.open()
    },
    closeDialog() {
      this.settingGPTViewDialogComponent.close()
    },
    copyHandler() {
      setClipboardData(this.url, () => {
        message.success('复制成功')
      })
    },
    onConfirmHandler() {
      const name = this.nameValue
      this.$emit(SettingGPTEditDescriptionEventEnum.Input, name)
      this.closeDialog()
    },
    onInputGPTRobotNameHandler(value: string) {
      this.nameValue = value
    },
    editNameHandler() {
      this.nameValue = this.name
      this.openDialog()
    },
    renderEditNameButton() {
      
      const isSystem = isRobotSystem(this.value)
      
      if (isSystem) {
        return
      }
      
      return (
        <el-button
          class="setting-gpt-robot-view-table__edit-button"
          type="text"
          size="mini"
          onClick={this.editNameHandler}
        >
          编辑
        </el-button>
      )
    },
    renderCopyButton() {
      return (
        <el-button
          class="setting-gpt-robot-view-table__copy-button"
          type="text"
          size="mini"
          onClick={this.copyHandler}
        >
          复制
        </el-button>
      )
    }
  },
  render() {
    return (
      <div class={ComponentNameEnum.SettingGPTEditDescription}>
        
        <div class="setting-gpt-edit-view-description-item setting-gpt-edit-view-description-item-name">
          
          <SettingGPTViewContentTitle
            title="机器人名称："
          >
          </SettingGPTViewContentTitle>
          
          <div class="setting-gpt-edit-view-description-item__content">
            
            <SettingGPTViewContentSubTitle
              title={this.name}
            >
            </SettingGPTViewContentSubTitle>
            
            { this.renderEditNameButton() }
            
          </div>
          
        </div>
        
        <div class="setting-gpt-edit-view-description-item">
          
          <SettingGPTViewContentTitle
            title="机器人链接："
          >
          </SettingGPTViewContentTitle>
          
          <div class="setting-gpt-edit-view-description-item__content">
            
            <SettingGPTViewContentSubTitle
              title={this.url}
            >
            </SettingGPTViewContentSubTitle>
            
            { this.renderCopyButton() }
            
          </div>
            
        </div>
        
        <SettingGPTViewDialog
          title={this.dialogTitle}
          ref="SettingGPTViewDialog"
          onConfirm={this.onConfirmHandler}
        >
          <SettingGPTRobotViewName
            ref="SettingGPTRobotViewName"
            value={this.nameValue}
            onInput={this.onInputGPTRobotNameHandler}
          >
          </SettingGPTRobotViewName>
        </SettingGPTViewDialog>
        
      </div>
    )
  }
})